<template>
  <TopNav title="个性化饮食指导"/>
  <div class="personalized-diet-page">

    <!-- 患者病情输入区域 -->
    <div class="patient-condition-section">
      <h2 class="section-title">患者病情信息</h2>
      <el-form :model="patientConditionForm">
        <el-form-item label="疾病名称">
          <el-input v-model="patientConditionForm.diseaseName"></el-input>
        </el-form-item>
        <el-form-item label="过敏食物">
          <el-input v-model="patientConditionForm.allergicFoods"></el-input>
        </el-form-item>
        <el-form-item label="特殊饮食限制">
          <el-input v-model="patientConditionForm.specialDietRestrictions"></el-input>
        </el-form-item>
        <el-form-item label="身体状况描述">
          <el-input v-model="patientConditionForm.healthDescription"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <!-- 营养需求评估区域 -->
    <div class="nutrition-assessment-section">
      <h2 class="section-title">营养需求评估</h2>
      <el-form :model="nutritionAssessmentForm">
        <el-form-item label="身高(cm)">
          <el-input-number v-model="nutritionAssessmentForm.height"></el-input-number>
        </el-form-item>
        <el-form-item label="体重(kg)">
          <el-input-number v-model="nutritionAssessmentForm.weight"></el-input-number>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model="nutritionAssessmentForm.age"></el-input-number>
        </el-form-item>
        <el-form-item label="活动水平">
          <el-select v-model="nutritionAssessmentForm.activityLevel">
            <el-option label="久坐少动" value="久坐少动"></el-option>
            <el-option label="轻度活动" value="轻度活动"></el-option>
            <el-option label="中度活动" value="中度活动"></el-option>
            <el-option label="重度活动" value="重度活动"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <!-- 饮食建议生成区域 -->
    <div class="diet-advice-section">
      <h2 class="section-title">饮食建议</h2>
      <p v-if="dietAdvice">{{ dietAdvice }}</p>
      <el-button
          type="primary"
          @click="generateDietAdvice"
          :disabled="!patientConditionForm.diseaseName ||!nutritionAssessmentForm.height ||!nutritionAssessmentForm.weight ||!nutritionAssessmentForm.age ||!nutritionAssessmentForm.activityLevel"
      >生成饮食建议</el-button>
    </div>

    <!-- 食物推荐区域 -->
    <div class="food-recommendation-section">
      <h2 class="section-title">食物推荐</h2>
      <el-table :data="recommendedFoods" style="width: 100%">
        <el-table-column prop="foodCategory" label="食物类别" width="150"></el-table-column>
        <el-table-column prop="foodItems" label="食物名称" width="250"></el-table-column>
        <el-table-column prop="reason" label="推荐理由" width="300"></el-table-column>
      </el-table>
    </div>

    <!-- 可视化区域（可展示营养成分比例等） -->
    <div class="visualization-section">
      <h2 class="section-title">营养可视化</h2>
      <div id="chart-container" style="width: 100%; height: 300px;"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import * as echarts from 'echarts';
import TopNav from "@/components/TopNav/Back.vue"
// 患者病情表单数据
const patientConditionForm = ref({
  diseaseName: '',
  allergicFoods: '',
  specialDietRestrictions: '',
  healthDescription: ''
});

// 营养评估表单数据
const nutritionAssessmentForm = ref({
  height: 0,
  weight: 0,
  age: 0,
  activityLevel: ''
});

// 饮食建议
const dietAdvice = ref('');
// 推荐食物数组
const recommendedFoods = ref([]);

// 根据患者信息生成饮食建议和食物推荐（简单示例逻辑，可根据实际情况完善）
const generateDietAdvice = () => {
  // 计算身体质量指数（BMI）
  const bmi = nutritionAssessmentForm.value.weight / ((nutritionAssessmentForm.value.height / 100) ** 2);

  // 根据疾病名称生成基本饮食建议
  if (patientConditionForm.value.diseaseName === '糖尿病') {
    dietAdvice.value = '控制碳水化合物摄入，选择低 GI 值食物，如全谷物、豆类等。增加膳食纤维摄入，多吃蔬菜和适量水果。控制脂肪摄入，优先选择不饱和脂肪酸。';
    recommendedFoods.value = [
      {
        foodCategory: '主食',
        foodItems: '燕麦、糙米',
        reason: '低 GI 值，富含膳食纤维，有助于控制血糖'
      },
      {
        foodCategory: '蛋白质',
        foodItems: '鸡胸肉、鱼肉',
        reason: '优质蛋白质，脂肪含量低'
      },
      {
        foodCategory: '蔬菜',
        foodItems: '西兰花、菠菜',
        reason: '富含维生素、矿物质和膳食纤维，对血糖影响小'
      }
    ];
  } else if (patientConditionForm.value.diseaseName === '高血压') {
    dietAdvice.value = '限制盐摄入，每日不超过 5 克。增加钾摄入，多食用香蕉、土豆等富含钾的食物。控制体重，保持适当能量平衡。适量摄入蛋白质，以植物蛋白为主。';
    recommendedFoods.value = [
      {
        foodCategory: '主食',
        foodItems: '红薯、玉米',
        reason: '富含膳食纤维，有助于控制体重'
      },
      {
        foodCategory: '蛋白质',
        foodItems: '豆腐、豆浆',
        reason: '植物性优质蛋白，低脂肪'
      },
      {
        foodCategory: '水果',
        foodItems: '香蕉、橙子',
        reason: '富含钾元素，有助于调节血压'
      }
    ];
  } else if (patientConditionForm.value.diseaseName === '高血脂') {
    dietAdvice.value = '控制总脂肪摄入，尤其是饱和脂肪和反式脂肪。增加不饱和脂肪酸摄入，如橄榄油、鱼油等。多吃富含膳食纤维的食物，促进胆固醇排出。';
    recommendedFoods.value = [
      {
        foodCategory: '脂肪',
        foodItems: '橄榄油、鱼油',
        reason: '富含不饱和脂肪酸，有益心血管健康'
      },
      {
        foodCategory: '主食',
        foodItems: '全麦面包、燕麦片',
        reason: '高膳食纤维，有助于降低血脂'
      },
      {
        foodCategory: '蔬菜',
        foodItems: '洋葱、香菇',
        reason: '含有特殊成分，有助于降低血脂'
      }
    ];
  } else {
    // 一般健康状况的饮食建议
    if (bmi < 18.5) {
      dietAdvice.value = '适当增加热量摄入，以优质蛋白质和碳水化合物为主，多吃富含维生素和矿物质的食物，促进体重增加。';
      recommendedFoods.value = [
        {
          foodCategory: '主食',
          foodItems: '米饭、面条',
          reason: '提供充足能量'
        },
        {
          foodCategory: '蛋白质',
          foodItems: '牛肉、鸡蛋',
          reason: '优质蛋白质，有助于肌肉生长'
        },
        {
          foodCategory: '水果',
          foodItems: '芒果、榴莲',
          reason: '高热量水果，补充能量'
        }
      ];
    } else if (bmi >= 18.5 && bmi < 24) {
      dietAdvice.value = '保持均衡饮食，摄入适量的蛋白质、碳水化合物和脂肪。多吃蔬菜、水果和全谷物，保证营养均衡。';
      recommendedFoods.value = [
        {
          foodCategory: '主食',
          foodItems: '全麦馒头、小米粥',
          reason: '富含膳食纤维，营养丰富'
        },
        {
          foodCategory: '蛋白质',
          foodItems: '瘦肉、鱼虾',
          reason: '优质蛋白质来源'
        },
        {
          foodCategory: '蔬菜',
          foodItems: '各种时令蔬菜',
          reason: '提供多种维生素和矿物质'
        }
      ];
    } else {
      dietAdvice.value = '控制热量摄入，减少高热量、高脂肪食物。增加蔬菜、水果和膳食纤维摄入，促进体重减轻。';
      recommendedFoods.value = [
        {
          foodCategory: '主食',
          foodItems: '荞麦面、藜麦',
          reason: '低热量、高膳食纤维'
        },
        {
          foodCategory: '蛋白质',
          foodItems: '去皮鸡肉、豆类',
          reason: '优质蛋白质，脂肪含量低'
        },
        {
          foodCategory: '蔬菜',
          foodItems: '芹菜、黄瓜',
          reason: '低热量、高水分，富含膳食纤维'
        }
      ];
    }
  }

  // 可视化数据准备（简单示例，可根据实际需求完善）
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);
  const xAxisData = ['蛋白质', '碳水化合物', '脂肪'];
  const yAxisData = [
    recommendedFoods.value.filter(item => item.foodCategory === '蛋白质').length,
    recommendedFoods.value.filter(item => item.foodCategory === '主食').length,
    recommendedFoods.value.filter(item => item.floodCategory === '脂肪').length
  ];
  const option = {
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '食物类别数量',
        type: 'bar',
        data: yAxisData,
        barWidth: 20,
        itemStyle: {
          color: '#5cb85c'
        }
      }
    ]
  };
  myChart.setOption(option);
};

// 页面加载时初始化图表
onMounted(() => {
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);
  const xAxisData = ['蛋白质', '碳水化合物', '脂肪'];
  const yAxisData = [0, 0, 0];
  const option = {
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '食物类别数量',
        type: 'bar',
        data: yAxisData,
        barWidth: 20,
        itemStyle: {
          color: '#5cb85c'
        }
      }
    ]
  };
  myChart.setOption(option);
});
</script>

<style scoped>
.personalized-diet-page {
  padding: 20px;
  background-color: #f4f4f5;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.page-header {
  text-align: center;
  margin-bottom: 20px;
}
.header-title {
  color: #303133;
  font-size: 28px;
}
.patient-condition-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.section-title {
  color: #303133;
  margin-bottom: 10px;
}
.nutrition-assessment-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.diet-advice-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.food-recommendation-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}
.visualization-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}
</style>
